<template>
    <div class="processes">
        <el-table ref="multipleTable" :data="tableData" border stripe style="width: 100%">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column prop="id" label="主键">
            </el-table-column>
            <el-table-column prop="name" label="名称">
            </el-table-column>
            <el-table-column prop="description" label="描述">
            </el-table-column>
            <el-table-column prop="key" label="流程key">
            </el-table-column>
            <el-table-column prop="version" label="版本">
            </el-table-column>
            <el-table-column prop="category" label="模版类型" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="deploymentId" label="部署id">
            </el-table-column>
            <el-table-column prop="resourceName" label="资源名称" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="diagramResourceName" label="资源图名称" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="variables" label="变量">
            </el-table-column>
            <el-table-column label="操作" width="200px">
                <template slot-scope="scope" v-if="scope.row.id != 1">
                    <el-button type="primary" plain size="mini" v-if="hasPrivilege('processDefinition:start')"
                        @click="startProcess(scope.row)">开启工作流
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[10, 50, 100, 200]" :page-size="search.size"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { workflowApi, commonApi } from "../../api/api";
import tables from "@/utils/tables";
import form from "@/utils/form";

export default {
    mixins: [tables, form],
    data() {
        return {
            tableData: [],
            total: 0,
            search: {
                size: 10,
                current: 1
            },
        }
    },
    created() {
        this.onSubmit();
    },
    methods: {
        onSubmit() {
            workflowApi.processesDefinitionPage(this.search).then(res => {
                this.loadPage(res)
            }, commonApi.popoverErrorMessage).catch(commonApi.popoverErrorMessage);
        },
        startProcess(row) {
            let data = { 'processDefinitionKey': row.key }
            workflowApi.startProcessInstance(data).then(
                commonApi.popoverSuccessMessage, commonApi.popoverErrorMessage
            ).catch(commonApi.popoverErrorMessage)
        }
    }
}
</script>

<style lang="scss" scoped>
.processes {
    .block {
        margin: 20px;
        float: right;
    }
}
</style>